<template>
  <div id="shop-item">
    <cart-list v-for="(item,index) in cartLists" :key="index" @click.native="btnClickCart(index)">
      <div class="shopItemList">
        <div class="item-selector">
          <check-button @backColorClick="backColorClick" :checked="[item.checked,index]"></check-button>
        </div>
        <div class="item-img">
          <img :src="item.topImages" alt="商品图片">
        </div>
        <div class="item-info">
          <div class="item-title">{{item.title}}</div>
          <div class="item-desc">商品描述: {{item.desc}}</div>
          <div class="info-bottom">
            <div class="item-price left">¥{{item.price}}</div>
            <div class="item-count right">x{{item.cartCount}}</div>
          </div>
        </div>
      </div>
    </cart-list>
  </div>
</template>

<script>
  import CartList from "views/cart/children/CartList";
  import CheckButton from "views/cart/children/CheckButton";
  import {isSelectedMixin} from "common/mixin";

  export default {
    name: "CartListItem",
    components: {
      CheckButton,
      CartList
    },
    props: {
      cartLists: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    computed: {

    },
    mixins: [isSelectedMixin],
    methods: {
      backColorClick(checker){
        this.cartLists[checker.index].checked = !checker.checked;
        this.isSelected ? this.$store.commit('setChecked',false) : this.$store.commit('setChecked',true);
      },
      btnClickCart(index){
        this.$router.push('/detail/' + this.cartLists[index].id);
      }
    }
  }
</script>

<style scoped>
  .shopItemList {
    width: 100%;
    display: flex;
    font-size: 0;
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }

  .item-selector {
    width: 14%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item-title, .item-desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .item-img {
    padding: 5px;
    /*border: 1px solid #ccc;*/
  }

  .item-img img {
    width: 80px;
    height: auto;
    display: block;
    border-radius: 5px;
  }

  .item-info {
    font-size: 17px;
    color: #333;
    padding: 5px 10px;
    position: relative;
    overflow: hidden;
  }

  .item-info .item-desc {
    font-size: 14px;
    color: #666;
    margin-top: 15px;
  }

  .info-bottom {
    margin-top: 10px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  .info-bottom .item-price {
    color: orangered;
  }
</style>